<template>
  <view>
	  <view class="box" style="width: 100%; height: 200rpx;">
	  	<image src="../../static/123.png" mode="" style="width: 100%; height: 100%;"></image>
	  </view>
    <view class="tab_nav">
      <view class="navTitle" v-for="(item,index) in navList" :key="index">
        <view :class="{'active':current === index}" @click="checked(index)">
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="nav_item" v-if="current==0">
      <view class="box_2">
      	<view class="box_3">
      		按主题办事
      	</view>
		<view class="box_4">
			<image src="../../static/97.png" mode="" style="width: 100%; height: 100%;"></image>
		</view>
		<view class="box_5">
			<view class="box_6">
				按部门办事
			</view>
			<view class="box_7">
				<view class="" style="font-size: 30rpx;">
					查看全部
				</view>
				<view class="">
					<image src="../../static/69.png" mode="" style=" width: 50rpx; height: 40rpx;"></image>
				</view>
			</view>
		</view>
		<view class="box_8">
			<scroll-view  scroll-x="true" style="height: 300rpx;white-space: nowrap;" scroll-with-animation="true" :scroll-into-view="'scroll'+scrollId">
			  <view class="">
			  	<image src="../../static/103.png" mode="" class="img_7"></image>
				<image src="../../static/104.png" mode="" class="img_8"></image>
				<image src="../../static/105.png" mode="" class="img_8"></image>
				<image src="../../static/106.png" mode="" class="img_8"></image>
				<image src="../../static/107.png" mode="" class="img_8"></image>
				<image src="../../static/108.png" mode="" class="img_8"></image>
			  </view>
			</scroll-view>
		</view>
		<view class="box_9">
			特色服务
		</view>
		<view class="box_10">
			<view class="box_11">
				<image src="../../static/109.png" mode="" class="img_9"></image>
			</view>
			<view class="box_11">
				<image src="../../static/110.png" mode="" class="img_9"></image>
			</view>
		</view>
		<view class="box_9">
			政务服务地图
		</view>
		<view class="box_12">
			<image src="../../static/111.png" mode="" style="width: 100%; height: 100%;"></image>
		</view>
		<view class="box_13">
			<view class="">
				-我是有底线的-
			</view>
		</view>
      </view>
    </view>
    <view class="nav_item" v-if="current==1">
      <view class="box_14">
      	<view class="box_15" style="font-weight: 600; font-size: 35rpx; margin-top: 30rpx;">
      		惠企服务
      	</view>
		<view class="box_16">
			<scroll-view  scroll-x="true" style="height: 200rpx;white-space: nowrap;" scroll-with-animation="true" :scroll-into-view="'scroll'+scrollId">
			  <view class="">
			  	<image src="../../static/112.png" mode="" class="img_11"></image>
				<image src="../../static/113.png" mode="" class="img_12"></image>
				<image src="../../static/114.png" mode="" class="img_12"></image>
			  </view>
			</scroll-view>
		</view>
		<view class="box_15" style="font-weight: 600; font-size: 35rpx; margin-top: 30rpx;">
			按主题办事
		</view>
		<view class="box_17">
			<view class="box_18">
				<view class="box_20">
					<view class="">
						<image src="../../static/115.png" mode="" style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="" style="font-size: 35rpx; font-weight: 600; margin-left: 15rpx;">
						设立变更
					</view>
				</view>
				<view class="box_20">
					<view class="" style="color: #888888; font-size: 30rpx;">
						更多服务
					</view>
					<view class="">
						<image src="../../static/122.png" mode="" style=" width: 30rpx; height: 40rpx;"></image>
					</view>
				</view>
			</view>
			<view class="box_19">
				<view class="box_21">
					<view class="box_22">
						预购商品房预告登记...
					</view>
					<view class="box_23">
						抵押权首次登记
					</view>
				</view>
				<view class="box_21">
					<view class="box_22">
						预购商品房抵押预告...
					</view>
					<view class="box_23">
						烟草专卖零售许可证...
					</view>
				</view>
			</view>
		</view>
		
		<view class="box_17">
			<view class="box_18">
				<view class="box_20">
					<view class="">
						<image src="../../static/116.png" mode="" style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="" style="font-size: 35rpx; font-weight: 600; margin-left: 15rpx;">
						交通运输
					</view>
				</view>
				<view class="box_20">
					<view class="" style="color: #888888; font-size: 30rpx;">
						更多服务
					</view>
					<view class="">
						<image src="../../static/122.png" mode="" style=" width: 30rpx; height: 40rpx;"></image>
					</view>
				</view>
			</view>
			<view class="box_19">
				<view class="box_21">
					<view class="box_22">
						申请网络预约出租车...
					</view>
					<view class="box_23">
						网络预约出租汽车车...
					</view>
				</view>
				<view class="box_21">
					<view class="box_22">
						郑冷链
					</view>
					<view class="box_23">
						巡游出租汽车车辆运...
					</view>
				</view>
			</view>
		</view>
		
		<view class="box_17">
			<view class="box_18">
				<view class="box_20">
					<view class="">
						<image src="../../static/117.png" mode="" style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="" style="font-size: 35rpx; font-weight: 600; margin-left: 15rpx;">
						安全生产
					</view>
				</view>
				<view class="box_20">
					<view class="" style="color: #888888; font-size: 30rpx;">
						更多服务
					</view>
					<view class="">
						<image src="../../static/122.png" mode="" style=" width: 30rpx; height: 40rpx;"></image>
					</view>
				</view>
			</view>
			<view class="box_19">
				<view class="box_21">
					<view class="box_22">
						第三类非药物类易制...
					</view>
					<view class="box_23">
						生产安全事故应急预...
					</view>
				</view>
				<view class="box_21">
					<view class="box_22">
						危险化学品经营许可...
					</view>
					<view class="box_23">
						危险化学品生产企业...
					</view>
				</view>
			</view>
		</view>
		<view class="box_17">
			<view class="box_18">
				<view class="box_20">
					<view class="">
						<image src="../../static/118.png" mode="" style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="" style="font-size: 35rpx; font-weight: 600;">
						公用事业
					</view>
				</view>
				<view class="box_20">
					<view class="" style="color: #888888; font-size: 30rpx;">
						更多服务
					</view>
					<view class="">
						<image src="../../static/122.png" mode="" style=" width: 30rpx; height: 40rpx;"></image>
					</view>
				</view>
			</view>
			<view class="box_19">
				<view class="box_21">
					<view class="box_22">
						水表更名、过户
					</view>
					<view class="box_23">
						水表计量异议
					</view>
				</view>
				<view class="box_21">
					<view class="box_22">
						单位用水报装
					</view>
					<view class="box_23">
						电表过户
					</view>
				</view>
			</view>
		</view>
		<view class="box_17">
			<view class="box_18">
				<view class="box_20">
					<view class="">
						<image src="../../static/119.png" mode="" style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="" style="font-size: 35rpx; font-weight: 600;">
						国土规划和建设
					</view>
				</view>
				<view class="box_20">
					<view class="" style="color: #888888; font-size: 30rpx;">
						更多服务
					</view>
					<view class="">
						<image src="../../static/122.png" mode="" style=" width: 30rpx; height: 40rpx;"></image>
					</view>
				</view>
			</view>
			<view class="box_19">
				<view class="box_21">
					<view class="box_22">
						国有建设用地使用权...
					</view>
					<view class="box_23">
						同一权利分割、合...
					</view>
				</view>
				<view class="box_21">
					<view class="box_22">
						开发建设单位出售商...
					</view>
					<view class="box_23">
						自然人委托拍卖房产
					</view>
				</view>
			</view>
		</view>
		<view class="box_17">
			<view class="box_18">
				<view class="box_20">
					<view class="">
						<image src="../../static/120.png" mode="" style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="" style="font-size: 35rpx; font-weight: 600;">
						行政许可
					</view>
				</view>
				<view class="box_20">
					<view class="" style="color: #888888; font-size: 30rpx;">
						更多服务
					</view>
					<view class="">
						<image src="../../static/122.png" mode="" style=" width: 30rpx; height: 40rpx;"></image>
					</view>
				</view>
			</view>
			<view class="box_19">
				<view class="box_21">
					<view class="box_22">
						市监一件事
					</view>
					<view class="box_23">
						清真食品一件事
					</view>
				</view>
				<view class="box_21">
					<view class="box_22">
						医疗广告审查
					</view>
					<view class="box_23">
						医疗机构变更名称
					</view>
				</view>
			</view>
		</view>
		<view class="box_17a">
			<view class="box_18">
				<view class="box_20">
					<view class="">
						<image src="../../static/121.png" mode="" style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="" style="font-size: 35rpx; font-weight: 600;">
						公共服务
					</view>
				</view>
				
			</view>
			<view class="box_19">
				<view class="box_21">
					<view class="box_22">
						单位参保信息查询
					</view>
					<view class="box_23">
						单位参保证明打印
					</view>
				</view>
			</view>
		</view>
		<view class="box_13">
			<view class="">
				-我是有底线的-
			</view>
		</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        current: 0,
        navList: [{
          index: 0,
          title: '个人办事'
        }, {
          index: 1,
          title: "企业办事"
        }]
      }
    },
    methods: {
      checked(index) {
        this.current = index
      },
    }
  }
</script>
 
 
<style lang="scss" scoped>
	.box_22{
		width: 43%;
	}
	.box_23{
		width: 43%;
	}
	
	.box_21{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 30rpx;
	}
	.box_19{
		display: flex;
		flex-direction: column;
		height: 100rpx;
		justify-content: space-between;
	}
	.box_20{
		display: flex;
		flex-direction: row;
	}
	.box_18{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 30rpx;
	}
	.box_17a{
		width: 100%;
		height: 200rpx;
		background: #f8fbff;
		border-radius: 30rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.box_17{
		width: 100%;
		height: 260rpx;
		background: #f8fbff;
		border-radius: 30rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.img_11{
		width: 45%;
		height: 180rpx;
	}
	.img_12{
		width: 45%;
		height: 180rpx;
		margin-left: 1%;
	}
	.box_14{
		width: 94%;
	}
	.box_13{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		font-size: 30rpx;
		color: #888888;
	}
	.box_12{
		width: 100%;
		height: 180rpx;
		margin-top: 30rpx;
	}
	.box_11{
		width: 49%;
		height: 160rpx;
	}
	.img_9{
		width:100%;
		height: 100%;
	}
	.box_10{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.img_8{
		width: 38%;
		height: 280rpx;
		margin-left: 2%;
	}
	.img_7{
		width: 38%;
		height: 280rpx;
	}
	.box_16{
		width: 100%;
		height: 200rpx;
		margin-top: 30rpx;
	}
	.box_8{
		width: 100%;
		height: 300rpx;
		margin-top: 30rpx;
	}
	.box_7{
		display: flex;
		flex-direction: row;
	}
	.box_5{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 50rpx;
	}
	.box_4{
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
	}
	.box_6{
		font-weight: 600;
		font-size: 37rpx;
	}
	.box_9{
		font-weight: 600;
		font-size: 37rpx;
		margin-top:50rpx;
	}
	.box_3{
		font-weight: 600;
		font-size: 37rpx;
	}
	.nav_item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box_2{
		width: 94%;
		margin-top: 30rpx;
	}
  .tab_nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
	
  }
 
  .tab_nav .navTitle {
    height: 90rpx;
    line-height: 90rpx;
    width: 22%;
    text-align: center;
    font-size: 32rpx;
    font-family: Alibaba PuHuiTi;
    color: #333;
	margin-left: 1%;
  }
 
  .active {
    position: relative;
	color: #000;
	font-weight: 600;
  }
 
  .active::after {
    content: "";
    position: absolute;
    width: 130rpx;
    height: 7rpx;
    background-color: #1F75FE;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  }
</style>
 